{% extends 'feedback/base.html' %} {% block title %} Отчеты {% endblock %}
{%block content %} 
{%include "naryad/menu.html" with address=request.resolver_match.view_name naryad_wait_count=naryad_wait_count naryad_in_work_count=naryad_in_work_count%}
<div id="place_for_modal"></div>

<script>
  var popoverTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="popover"]')
  );
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl);
  });
</script>

<br />
<div
  class="p-2 row align-items-center row-cols-2 border shadow-lg p-3 mb-5 bg-body rounded"
>
  <div class="col">
    <b>
      Выполнено нарядов: {% if naryads_in_work > 0 %}{{ naryads_in_work }}
      {%else %}0{% endif %}
    </b>
  </div>
  <div class="col">
    <b>
      Нарядов выполненно на сумму:
      <b class="font-monospace">{{ sum_done_nar }}</b>р.
    </b>
  </div>
  <br />
  <div class="col">
    <b> Нарядов в работе: {{ count_inwork_nar }} </b>
  </div>
  <div class="col">
    <b> Нарядов в работе на сумму: {{ sum_inwork_nar }} </b>
  </div>
  <div class="col">
    <b> Нарядов в работе: {{ naryad_list|length }} </b>
  </div>
  <div class="col">
    <b> Выполнено нарядов: {{ naryads_in_work }} </b>
  </div>
</div>
<div
  class="p-2 row align-items-center d-flex justify-content-center row-cols-2 border shadow-lg p-3 mb-5 bg-body rounded"
>
  <div class="w-75 p-3">
    <canvas id="myChart"></canvas>
  </div>
</div>
<div
  class="p-2 row align-items-center d-flex justify-content-center row-cols-2 border shadow-lg p-3 mb-5 bg-body rounded"
>
  <div class="w-75 p-3">
    <canvas id="bar-chart-grouped" width="800" height="450"></canvas>
  </div>
</div>
<div
  class="p-2 row align-items-center d-flex justify-content-center row-cols-2 border shadow-lg p-3 mb-5 bg-body rounded"
>
  <div class="w-75 p-3">
    <canvas id="bar-chart" width="800" height="450"></canvas>
  </div>
</div>
<div
  class="p-2 row align-items-center d-flex justify-content-center row-cols-2 border shadow-lg p-3 mb-5 bg-body rounded"
>
  <div class="w-75 p-3">
    <canvas id="line-chart" width="800" height="450"></canvas>
  </div>
</div>
<div
  class="p-2 row align-items-center d-flex justify-content-center row-cols-2 border shadow-lg p-3 mb-5 bg-body rounded"
>
  <div class="w-75 p-3">
    <canvas id="pie-chart" width="800" height="450"></canvas>
  </div>
</div>
<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
      type: 'bar',
      data: {
      labels: ['Иванов', 'Петров', 'Сидоров', 'Мальцев', 'Пупкин', 'Смирнов'],
      datasets: [{
          label: '# Нярдов в работе',
          data: [135, 215, {{naryad_list|length}}, 155, 2, 208],
          borderWidth: 1,
          backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(75, 192, 192)',
          'rgb(75, 192, 192)',
          'rgb(75, 192, 192)',
          'rgb(75, 192, 192)',
          'rgb(75, 192, 192)',
  ],
      }]
      },

      options: {
      scales: {
          y: {
          beginAtZero: true
          }
      }
      }
  });


  new Chart(document.getElementById("bar-chart-grouped"), {
      type: 'bar',
      data: {
        labels: ["Август", "Сентябрь", "Октябрь", "Ноябрь"],
        datasets: [
          {
            label: "Лаборатория 1",
            backgroundColor: "#3e95cd",
            data: [133,221,783,2478]
          }, {
            label: "Лаборатория 2",
            backgroundColor: "#8e5ea2",
            data: [408,547,675,734]
          }
        ]
      },
      options: {
        title: {
          display: true,
          text: 'Количество выполненных нарядов по месяцам'
        }
      }
  });

      // Bar chart
  new Chart(document.getElementById("bar-chart"), {
      type: 'bar',
      data: {
        labels: ['Иванов', 'Петров', 'Сидоров', 'Мальцев', 'Пупкин'],
        datasets: [
          {
            label: "Выполненно нарядов",
            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            data: [2478,5267,734,784,433]
          }
        ]
      },
      options: {
        legend: { display: false },
        title: {
          display: true,
          text: 'Выполненно нарядов по сотрудникам'
        }
      }
  });


  new Chart(document.getElementById("line-chart"), {
      type: 'line',
      data: {
        labels: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь', 'Ноябрь', 'Декабрь'],
        datasets: [{
            data: [20, 48, 53, 85, 34, 73, 91, 74, 49, 48, 97, 32, 67],
            label: "Иванов",
            borderColor: "#3e95cd",
            fill: false
          }, {
            data: [15, 74, 62, 98, 70, 82, 86, 35, 91, 56, 33, 67, 63],
            label: "Петров",
            borderColor: "#8e5ea2",
            fill: false
          }, {
            data: [19, 47, 38, 31, 54, 58, 79, 53, 95, 99, 65, 69, 82],
            label: "Сидоров",
            borderColor: "#3cba9f",
            fill: false
          }, {
            data: [12, 75, 38, 100, 87, 32, 85, 66, 100, 67, 30, 45, 99],
            label: "Мальцев",
            borderColor: "#e8c3b9",
            fill: false
          }, {
            data: [14, 95, 60, 56, 86, 91, 34, 85, 91, 36, 74, 92, 42],
            label: "Пупкин",
            borderColor: "#c45850",
            fill: false
          }
        ]
      },
      options: {
        title: {
          display: true,
          text: 'Статистика за год по сотрудникам'
        }
      }
    });


    new Chart(document.getElementById("pie-chart"), {
      type: 'pie',
      data: {
        labels: ["Поликлиника №1", "Поликлиника №2", "Поликлиника №3", "Поликлиника №5", "Кировская поликлиника"],
        datasets: [{
          label: "Доходы по поликлиникам",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [10127015,9290718,5503890,9503890,279664]
        }]
      },
      options: {
        title: {
          display: true,
          text: 'Общие доходы поликлиникам'
        }
      }
  });
</script>
<div id="place_for_modal"></div>
{% endblock %}
